import '../assets/css/nav.scss'
import { useState, useEffect, useCallback } from 'react';
import { NavLink, Link, useNavigate } from 'react-router-dom';
import { Badge, Input } from 'antd'
import { SearchOutlined } from '@ant-design/icons';
import { indexSearch } from '../api/indexApi'

function Nav() {

    // 定义搜索值
    let [searchVal, setsearchVal] = useState([])

    // 定义搜索结果变量
    let [song, setsong] = useState([])
    let [artist, setartist] = useState([])
    let [album, setalbum] = useState([])


    let o = ''

    //  监听搜索框change事件
    const onSearch =  (value) => {

        o =  value.target.value.trim()

        // console.log(o);
        if (o === '') {
            setsong([]) // 单曲
            setartist([])   // 歌手
            setalbum([])
            // console.log(12)
        } else {
            // console.log(o);
            setsearchVal(o)
        }
    }

    // 搜索请求函数
    const handleSearch = useCallback(function handleSearch() {
        // type: 搜索类型；默认为 1 即单曲 , 取值意义 : 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频, 1018:综合, 2000:声音(搜索声音返回字段格式会不一样)
            if (o !== ' ') {
                indexSearch(searchVal, '1018').then((res) => {
    
                    if (res.data.code) {
                        setsong(res.data.result.song.songs) // 单曲
                        setartist(res.data.result.artist.artists)   // 歌手
                        setalbum(res.data.result.album.albums)  // 专辑
                        // console.log(album)
                    }
                }).catch((err) => {
                    // console.error(err)
                })
            }
    }, [searchVal, o])

    // 触发搜索事件跳转搜索页面 
    const navigate = useNavigate()
    function toSearch(value) {
        if (value.target.value) {
            navigate(`/search/songs?s=${value.target.value}`)
        }
    }

    useEffect(() => {
        if (searchVal) {
            // console.log(searchVal);
            handleSearch()
        } else {
            setsong([]) // 单曲
            setartist([])   // 歌手
            setalbum([])  // 专辑
        }
    }, [searchVal, handleSearch])
    const searchStyle = { width: '158px', borderRadius: '30px', fontSize: '12px' }
    return (
        <div>
            <div className="navbox">
                {/*  */}
                <div className='navboxbar'>
                    <Link className='logo'>
                        <img src={require('../assets/images/logo.png')} alt=''></img>
                        <span>零七音乐</span>
                    </Link>
                    <ul>
                        <NavLink to={'/home'}><li>发现音乐</li></NavLink>
                        <NavLink to={'/about'}><li>我的音乐</li></NavLink>
                        <NavLink to={'/focus'}><li>关注</li></NavLink>
                        <NavLink to={'/shop'}><li>商城</li></NavLink>
                        <NavLink to={'/musicman'}><li>音乐人</li></NavLink>
                        <Badge count={'hot'} offset={[10, 20]}>
                            <NavLink to={'/download'}><li>下载客户端</li></NavLink>
                        </Badge>
                    </ul>
                    {/*  */}
                    <div className='toolsbar'>
                        {/* 搜索框 */}
                        <div className='search'>
                            <Input
                                placeholder="音乐/视频/电台/用户"
                                prefix={<SearchOutlined />}
                                onChange={onSearch}
                                onPressEnter={value => toSearch(value)}
                                style={searchStyle}
                            />

                            {/* 搜索结果显示 */}
                            <div className='searchdisplay'>
                                {
                                    song.map((a) => {
                                        let arname = a.ar.map((artist) => artist.name + ' ')
                                        return <Link key={a.id} to={`/songsDetail?id=${a.id}`}><li ><button className='song'>单曲</button>{a.name} - {arname}</li></Link>
                                    })
                                }
                                {
                                    artist.map((b) => {
                                        return <li key={b.id}><button className='artist'>歌手</button>{b.name}</li>
                                    })
                                }
                                {
                                    album.map((c) => {
                                        return <li key={c.id}><button className='album'>专辑</button>{c.name} - {c.artist.name}</li>
                                    })
                                }
                            </div>
                        </div>
                        <button className='workcenter'>
                            创作者中心
                        </button>
                        <Link to={'/login'} className='login'>登录</Link>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Nav;